<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
    <link rel="stylesheet" href="./lib/throttle.css" />
  </head>

  <body>
    <!-- 外层的盒子 -->
    <div class="box">
      <!-- 思聪 -->
      <img src="./img/photo.gif" class="photo" alt="" />
    </div>

    <!-- 发射的按钮 -->
    <button class="btn btn-primary btn-fire">Fire</button>

    <script src="./lib/jquery-v3.6.0.js"></script>
    <script>
      $(function () {
        let isOK = false; // 是否已经发送
        $(".btn-fire").on("click", function () {
          // 1. 动态创建子弹的 DOM 对象
          if (isOK) return; // 如果已经发送过了 不发送了
          isOK = true; // 只要走到这个位置 表示 一定没有发送过
          const newBall = $(
            '<img src="./img/bullet.png" class="ball" alt="" />'
          );
          // 2. 将子弹添加到页面的盒子中
          $(".box").append(newBall);
          // 3. 执行动画
          newBall.animate({ left: "95%" }, 500, "linear", function () {
            // 当动画完成之后，移除这个子弹
            $(this).remove();
            isOK = false;
          });
        });
      });
    </script>
  </body>
</html>
